<template>
  <div class="add-project">
    <el-button type="primary" size="small" class="project" @click="clickAddProject()"><i class="el-icon-plus"></i>新建项目</el-button>
    <el-dialog title="新增项目" :visible.sync="dialogVisible" width="30%">
      <el-form ref="form" :model="projectForm" label-width="80px">
        <el-form-item label="项目名称" required>
          <el-input v-model="projectForm.name" placeholder="请输入项目名"></el-input>
        </el-form-item>
        <el-form-item label="项目类型" required>
          <el-select v-model="projectForm.type" placeholder="请选择项目类型">
            <el-option label="Web" value="0"></el-option>
            <el-option label="APP" value="1"></el-option>
            <el-option label="H5" value="2"></el-option>
            <el-option label="小程序" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目描述">
          <el-input type="textarea" placeholder="请输入项目描述" v-model="projectForm.description" :autosize="{ minRows: 4, maxRows: 10}">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="medium">取 消</el-button>
        <el-button type="primary" @click="addProject(projectForm)" size="medium">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {createProject} from '@/api/project'
import {dateFormat} from '@/utils/dateFormat'

export default {
  data() {
    return {
      dialogVisible: false,
      projectForm: {
        name: '',
        type: '',
        description: '',
        createTime: '',
        updateTime: ''
      }
    }
  },
  methods: {
    //点击添加按钮
    clickAddProject() {
      //初始化表单
      this.projectForm = {}
      //显示弹框
      this.dialogVisible = true
    },
    //添加项目-点击添加-确定
    addProject(data) {
      this.projectForm.createTime = dateFormat('YYYY-mm-dd HH:MM:SS', new Date())
      this.projectForm.updateTime = dateFormat('YYYY-mm-dd HH:MM:SS', new Date())
      if (data.name == null) {
        this.$message({
          message: '项目名称不能为空！',
          type: 'warning'
        });
        return
      }
      if (data.type == null) {
        this.$message({
          message: '项目类型不能为空！',
          type: 'warning'
        });
        return
      }
      createProject(data).then(response => {
        console.log(response)
        if (response.code === 200) {
          this.$message({
            message: response.message,
            type: 'success'
          });
          //调用父组件方法，刷新当前页项目列表
          this.$emit("getAllProject")
          //关闭弹框
          this.dialogVisible = false
        } else {
          this.$message.error('添加失败！');
        }
      })
    },
  }
}
</script>
<style scoped>
.project-manager .project {
  float: right;
  margin-top: 8px;
  margin-right: 8px;
}

.add-project >>> .el-select {
  display: block;
}
</style>
